<!--端口检测-->
<template>
  <div class="h-[100%] box-border w-[100%]">
    <el-card shadow="always">
      <el-form
        size="default"
        inline="true"
        label-width="auto"
        class="translate-y-2"
      >
        <el-form-item label="挂载点:">
          <el-input
            clearable
            placeholder="请输入挂载点"
            v-model="dataParams.mountPoint"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button :icon="Refresh" type="primary" @click="getOtaByMount"
            >查询
          </el-button>
          <el-button :icon="Sunny" type="primary" @click="openDialog"
            >服务配置
          </el-button></el-form-item
        >
      </el-form>
    </el-card>
    <div class="main mt-2">
      <el-card class="cardData" style="width: 100%; height: 100%">
        <el-table
          height="65vh"
          :border="true"
          :data="dataList"
          v-loading="tableLoading"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            prop="mountPoint"
            label="挂载点"
            width="150"
          ></el-table-column>
          <el-table-column prop="deviceStatus" label="设备状态">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.deviceStatus ? 'success' : 'info'"
              >
                {{ scope.row.deviceStatus ? "在线" : "离线" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="userSize" label="通信用户数量">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.userSize > 0 ? 'success' : 'info'"
              >
                {{ scope.row.userSize }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="onlineTime"
            label="设备最新上线时间"
            :formatter="
              (row) => dayjs(row.onlineTime).format('YYYY-MM-DD HH:mm:ss')
            "
          />
          <el-table-column
            v-if="false"
            prop="offlineTime"
            label="设备最新下线时间"
            :formatter="
              (row) => dayjs(row.offlineTime).format('YYYY-MM-DD HH:mm:ss')
            "
          />
        </el-table>
      </el-card>
    </div>
  </div>
  <el-dialog
    v-model="dialogStatusInfo.forwardDialog"
    draggable
    class="myFrom"
    width="40vw"
    style="display: flex; flex-direction: column"
  >
    <template #header>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <h3
          style="
            width: 200px;
            text-align: center;
            margin: 0;
            border: 0;
            padding: 0;
          "
        >
          {{ dialogStatusInfo.title }}
        </h3>
      </div>
    </template>
    <el-form :model="serverForm" label-width="120px">
      <el-form-item label="服务端口:" prop="port">
        <el-input
          :disabled="serverForm.Enable"
          v-model="serverForm.Port"
          placeholder="请输入服务端口"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务状态" prop="status">
        <el-switch
          :disabled="swictchStatus"
          v-model="serverForm.Enable"
          @change="EditOtaServerStatus"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          :icon="CloseBold"
          @click="dialogStatusInfo.forwardDialog = false"
          >关闭
        </el-button>
        <el-button :icon="Check" type="primary" @click="editPort">
          保存端口
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";

import { ElMessage, ElLoading } from "element-plus";
import { Refresh, Sunny, CloseBold, Check } from "@element-plus/icons-vue";
import {
  GetOtaByMountAPI,
  UpdateOtaPortAPI,
  UpdateOtaStatusAPI,
  GetOtaConfigAPI,
} from "@/api/ota";

import dayjs from "dayjs";

/**
 * 公共数据
 */
const tableLoading = ref(false);
//弹窗修改状态信息
const dialogStatusInfo = ref({
  forwardDialog: false,
  title: "配置中心",
});

/**
 * 弹窗打开函数
 */

async function openDialog() {
  const res = await GetOtaConfigAPI();
  console.log("configInfo:", res);
  if (res.code === 200) {
    serverForm.value = res.data.info;
  } else {
    ElMessage.error(res.data);
    return;
  }
  dialogStatusInfo.value.forwardDialog = true;
}

/**
 * 转发数据获取*************************
 */
//数据列表
const dataList = ref<any[]>([]);
//数据查询参数
const dataParams = ref({
  mountPoint: "",
});

const serverForm = ref({
  Enable: false,
  Port: 6666,
});
const swictchStatus = ref(false);
const getOtaByMount = async () => {
  const res = await GetOtaByMountAPI(dataParams.value);

  if (res.code === 200) {
    if (res.data) {
      dataList.value.length = 0;
      dataList.value.push(res.data);
    } else {
      dataList.value = [];
      ElMessage.info("暂无设备");
    }
  } else {
    ElMessage.error(res.data);
  }
};

const EditOtaServerStatus = async (v) => {
  console.log(v);
  swictchStatus.value = true;
  const res = await UpdateOtaStatusAPI({
    flag: v,
  });
  if (res.code === 200) {
    ElMessage.success("执行成功");
  } else {
    ElMessage.error(res.data);
  }
  swictchStatus.value = false;
};

const editPort = async () => {
  if (serverForm.value.Enable) {
    ElMessage.info("请先关闭服务");
    return;
  }
  const res = await UpdateOtaPortAPI({
    port: Number(serverForm.value.Port),
  });
  if (res.code === 200) {
    ElMessage.success("修改成功");
  } else {
    ElMessage.error(res.data);
  }
};
</script>

<style scoped>
.container {
  box-sizing: border-box;
  height: 100%;
}

::v-deep(.el-table .success) {
  background-color: #e9ffdb;
}

::v-deep(.el-table .fail) {
  background-color: #ffc87c;
}

[type="file"] {
  color: red;
  /* font-size: 0; */
}

/* 主按钮的样式自定义 */
::file-selector-button {
  height: 2.5rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

::-ms-browse {
  height: 3rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

.page {
  position: absolute;
  bottom: 10px;
  left: 400px;
}

/*
.cardData {
  position: relative;
  height: 95%;
} */

.card {
  /* width: 80vw; */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card2 {
  height: 80px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.isActive {
  background-color: red;
  color: bisque;
}

.header {
  /* background-color: rgb(240, 240, 240); */
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10%;
}

.main {
  display: flex;
  height: 90%;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
